<template>
  <div class="tag-edit">
    <el-dialog
      title="添加标签"
      :visible.sync="tagAddVisible"
      width="40%">
      <el-input @focus="tagAddRepeat = false" v-model="tagAddValue"></el-input>
      <span style="color: red" v-show="tagAddRepeat">*此标签已经被添加，请勿重复添加</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="tagAddVisible = false">取 消</el-button>
    <el-button type="primary" @click="tagAddSubmit">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="编辑标签"
      :visible.sync="tagEditVisible"
      width="40%">
      <el-input @focus="tagEditRepeat = false" v-model="tagEditValue.tagName"></el-input>
      <span style="color: red" v-show="tagEditRepeat">*此标签已经被添加，请勿重复添加</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="tagEditVisible = false">取 消</el-button>
    <el-button type="primary" @click="tagEditSubmit">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="我的标签"
      :visible.sync="tagTableVisible"
      width="60%">
      <el-table
        :data="tagData"
        border
        style="width: 100%">
        <el-table-column
          prop="tagName"
          label="标签">
        </el-table-column>
        <el-table-column
          prop="likeCount"
          label="赞同数"
          width="150">
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作"
          width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.likeCount == 0">
              <el-button @click="tagDelete(scope.row)" type="text" size="small">删除</el-button>
              <el-button @click="tagEdit(scope.row)" type="text" size="small">编辑</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
    <el-button @click="tagTableVisible = false">取 消</el-button>
    <el-button type="primary" @click="tagTableVisible = false">确 定</el-button>
  </span>
    </el-dialog>
    <span class="add-tag" @click="tagAddVisible = true">添加标签</span>
    <span class="my-tag" @click="tagEditData">我的添加</span>
    <!--<span class="tag" v-for="item in tagEditList">{{item.zhName}}</span>-->
    <tagItem class="tag-item" :tagList="tagList" @tag-agree="tagAgree"></tagItem>
  </div>
</template>

<script>
  import tagItem from './tagItem'
  import {getUsername} from '../../../utils/auth'

  export default {
    components: {
      tagItem
    },
    data() {
      return {
        // ipport: 'http://10.100.93.75:8083',
        // ipport: 'http://10.122.33.101:8085',
        ipport: process.env.TAGS_API_URL,
        tagList: [], //用户添加的标签
        tagAddRepeat: false,
        tagEditRepeat: false,
        tagAddValue: '',
        tagEditValue: '',
        tagAddVisible: false,
        tagTableVisible: false,
        tagEditVisible: false,
        tagData: [] //我的标签表格数据
      }
    },
    methods: {
      async tagAddSubmit() {
        let params = {
          username: getUsername(),
          customerId: '京东',
          tagName: this.tagAddValue,
          flag: 'group'
        }
        let resRepeat = await this.axios.post(`${this.ipport}/CbiFunction/checkTag`, params)
        // console.log(resRepeat.data.data.success)
        if (resRepeat.data.data.success === 'false') {
          this.tagAddRepeat = true
        } else {
          let res = await this.axios.post(`${this.ipport}/CbiFunction/tagsInsert`, params)
          // console.log(res)
          this.getTagList()
          this.tagAddVisible = false
        }
      },
      async tagAgree(data) {
        // console.log(data.tagId, '1222222222222222')
        let params = {
          username: getUsername(),
          customerId: data.customerId,
          flag: 'group',
          tagId: data.tagId
        }
        let res = await this.axios.post(`${this.ipport}/CbiFunction/pointPraise`, params)
        if (res.data.status === 200) {
          this.getTagList()
        }
      },
      async getTagList() {
        let params = {
          username: getUsername(),
          customerId: '京东',
          flag: 'group'
        }
        let res = await this.axios.post(`${this.ipport}/CbiFunction/tagsByCustomerId`, params)
        let data = res.data.data
        this.tagList = data
      },
      async getTagData() {
        let params = {
          username: getUsername(),
          customerId: '京东',
          flag: 'group'
        }
        let res = await this.axios.post(`${this.ipport}/CbiFunction/tagsByCreatorAndCustomerId`, params)
        let data = res.data.data
        this.tagData = data
        // console.log(this.tagData)
      },
      tagEditData() {
        this.getTagData()
        this.tagTableVisible = true
      },
      async tagDelete(data) {
        try{
          let order = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          try {
            let params = {
              username: getUsername(),
              tagId: data.tagId
            }
            let resDelete = await this.axios.post(`${this.ipport}/CbiFunction/tagsDelete`, params)
            let dataDelete = resDelete.data.data
            if (dataDelete.success == 'true') {
              this.$message({
                type: 'success',
                duration: 1000,
                message: '删除成功!'
              })
              this.getTagData()
              this.getTagList()
            } else {
              this.$message({
                type: 'danger',
                duration: 1000,
                message: '删除失败!'
              })
            }
          } catch (err) {
            console.log(err)
          }
        } catch (err) {
          this.$message({
            type: 'info',
            duration: 1000,
            message: '已取消删除'
          })
        }
      },
      tagEdit(data) {
        this.tagEditValue = data
        this.tagEditVisible = true
      },
      async tagEditSubmit() {
        let params = {
          username: getUsername(),
          customerId: '京东',
          tagName: this.tagEditValue.tagName,
          tagId: this.tagEditValue.tagId,
          flag: 'group'
        }
        let resRepeat = await this.axios.post(`${this.ipport}/CbiFunction/checkTag`, params)
        // console.log(resRepeat.data.data.success)
        if (resRepeat.data.data.success === 'false') {
          this.tagEditRepeat = true
        } else {
          let res = await this.axios.post(`${this.ipport}/CbiFunction/tagsUpdate`, params)
          // console.log(res)
          this.getTagList()
          this.tagEditVisible = false
        }
      }
    },
    watch: {
      tagAddVisible(n) {
        if (n == false) {
          this.tagAddValue = ''
          this.tagAddRepeat = false
        }
      },
      tagEditVisible(n) {
        if (n == false) {
          this.tagEditValue = ''
          this.tagEditRepeat = false
        }
      }
    },
    mounted() {
      this.getTagList()
    }
  }
</script>

<style scoped lang="scss">
  .add-tag, .my-tag {
    position: absolute;
    right: 20px;
    top: 0px;
    cursor: pointer;
    &.add-tag {
      right: 100px;
    }
    &:hover {
      color: #0099ff;
    }
  }

  .tag-item {
    display: inline-block;
    /*margin-top: 10px;*/
  }
</style>
